<template>
  <hsa-dialog v-model:visible="dialogVisible" title="权限分析" width="500">
    <!-- 对话框内容 -->
    <hsa-table v-bind="tableOption"></hsa-table>
    <!-- 对话框底部按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </hsa-dialog>
</template>

<script setup lang="ts">
import { ref ,reactive} from "vue";
import type { HsaTableColumn } from "hsa-ui"
// 控制对话框的显示与隐藏
const dialogVisible = ref(false);
const tableOption = reactive({
        showIndex: true,
        data: ref<any[]>([
            { linkIP: '192.168.0.1', linkTime: '2016-05-03', isSuccess: '成功' },
            { linkIP: '192.168.0.1', linkTime: '2016-05-03', isSuccess: '成功' },
            { linkIP: '192.168.0.1', linkTime: '2016-05-03', isSuccess: '失败' },
            { linkIP: '192.168.0.1', linkTime: '2016-05-03', isSuccess: '成功' }
        ]),
        columns: ref<HsaTableColumn[]>([
            { align: 'center', label: '链接IP', width: 220, prop: 'linkIP' },
            { align: 'center', label: '链接时间', minWidth: 200, prop: 'linkTime' },
            { align: 'center', label: '是否成功', minWidth: 200, prop: 'isSuccess' },
        ])
    })

// 提交表单时的处理函数
const handleSubmit = () => {
  console.log("表单数据:", formData.value);
  // 提交表单后关闭对话框
  dialogVisible.value = false;
};
const open = () => {
  dialogVisible.value = true;
};
defineExpose({
  open,
});
</script>
